import React, { useState, useEffect } from "react";
import { fetch } from "mfetch";
import { Skeleton } from "antd";
import styled from "styled-components";
import { SchemaForm, FormButtonGroup, Submit, Reset } from "@formily/antd"; // 或者 @formily/next
import * as components from "@formily/antd-components";

import "antd/dist/antd.css";

const service = () => {
  return fetch({
    url: "./demo.json",
  })
    .then((res) => res.json())
    .then((result) => {
      return result;
    });
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
`;

const Head = styled.div`
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
`;

const Content = styled.div`
  padding: 16px;
  flex: 1;
`;

const App = () => {
  const [schema, setSchema] = useState(null);
  useEffect(() => {
    async function fetchData() {
      const result = await service();
      setSchema(result);
    }
    fetchData();
  }, []);
  return (
    <Container>
      <Head>formily 示例</Head>
      <Content>
        {schema ? (
          <SchemaForm
            components={components}
            schema={schema}
            onSubmit={(values) => {
              console.log(values);
            }}
          >
            <FormButtonGroup>
              <Submit>提交</Submit>
              <Reset>重置</Reset>
            </FormButtonGroup>
          </SchemaForm>
        ) : (
          <Skeleton active />
        )}
      </Content>
    </Container>
  );
};

export default App;
